<template>
	<view class="login">
		<image src="../../static/images/login/loginBg.png" class="bg1"></image>
		<image src="../../static/images/login/loginBg2.png" class="bg2" v-show="loginState == 1"></image>
		<view class="login-state1" v-show="loginState == 1">
			<text class="title">欢迎登录智能健康戒指备份</text>
			<text class="sub-title">您的智能健康管家</text>
			<image src="../../static/images/my/zh.png"></image>
			<view class="login-btn-wrapper">
				<text class="login-btn" @click="loginState = 2">登录账号</text>
				<text class="term" style="font-size: 0;">
					<!-- 	<image class="check-icon"
						:src="isChecked ? '../../static/images/login/check2.png' : '../../static/images/login/check1.png'"
						@click="handleCheck">
					</image> -->
					我已阅读 <text class="term-href">《用户协议》</text> 和 <text class="term-href">《隐私政策》</text> 并理解
				</text>
			</view>
		</view>
		<view class="login-state2" v-show="loginState == 2">
			<view class="title">欢迎登录<br />
				智能健康戒指</view>
			<image class="img1" src="../../static/images/my/zh.png"></image>
			<view class="form">
				<view class="label">
					<image class="img2" src="../../static/images/login/icon1.png"></image>
					<text>用户手机号</text>
				</view>
				<u--input class="inputer" color="#fff" placeholderStyle="rgb(153, 153, 153)" placeholder="请输入手机号"
					v-model="form.mobile"></u--input>
				<view class="label">
					<image class="img2" src="../../static/images/login/icon2.png"></image>
					<text>验证码</text>
				</view>
				<view class="pwd">
					<u--input class="inputer" color="#fff" placeholderStyle="rgb(153, 153, 153)" placeholder="请输入验证码"
						v-model="form.code"></u--input>
					<text class="send-code" @click="handleSendCode">{{ codeTxt }}</text>
				</view>
			</view>
			<view class="login-btn-wrapper">
				<text class="login-btn" @click="handleLogin">登录账号</text>
				<text class="term">
					<image class="check-icon"
						:src="isChecked ? '../../static/images/login/check2.png' : '../../static/images/login/check1.png'"
						@click="handleCheck">
					</image>
					我已阅读 <text class="term-href">《用户协议》</text> 和 <text class="term-href">《隐私政策》</text> 并理解相关条款内容
				</text>
			</view>
		</view>

	</view>
</template>

<script>
	import request from "@/utils/request/request"
	export default {
		data() {
			return {
				loginState: 1,
				codeTxt: '发送验证码',
				isChecked: false, // 选中状态
				countdown: null,
				form: {
					mobile: "15631912679",
					code: "9999"
				}
			};
		},
		onLoad() {},
		onReady() {},
		methods: {
			handleLogin() {
				let _this = this
				// 手机号验证
				if (!this.form.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.form.mobile)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					});
					return;
				}

				// 验证码验证
				if (!this.form.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}

				// 协议勾选验证
				if (!this.isChecked) {
					uni.showToast({
						title: '请先阅读并同意协议',
						icon: 'none'
					});
					return;
				}
				//token和用户信息缓存
				this.$store.dispatch('user/loginCheck', this.form).then(res => {
					if (res.data && res.data.accessToken) {
						uni.switchTab({
							url: '/pages/HomePage/HomePage'
						});
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				})
			},
			handleCheck() {
				this.isChecked = !this.isChecked;
			},
			handleSendCode() {
				// 验证手机号格式
				if (!/^1[3-9]\d{9}$/.test(this.form.mobile)) {
					uni.showToast({
						title: '请输入有效手机号',
						icon: 'none'
					});
					return;
				}
				request({
					url: "http://rings.lx.aiminis.com/app-api/member/auth/send-sms-code",
					method: "post",
					data: {
						"mobile": this.form.mobile,
						"scene": 1
					},
				}).then(res => {
					this.form.code = '9999';
				})

				// 倒计时逻辑
				let seconds = 60;
				this.countdown = setInterval(() => {
					if (seconds <= 0) {
						clearInterval(this.countdown);
						this.codeTxt = '重新发送';
						return;
					}
					this.codeTxt = `重新发送${seconds}s`;
					seconds--;
				}, 1000);

				// 这里添加实际发送验证码的API调用
				// axios.post('/api/send-code', { phone: this.form.mobile })
			}
		},
		beforeDestroy() {
			if (this.countdown) clearInterval(this.countdown);
		}
	};
</script>

<style scoped lang="scss">
	uni-input {
		color: #FFFFFF;
	}

	.login {
		height: 100vh;
		overflow: hidden;

		.bg1 {
			width: 100%;
			position: absolute;
			top: 0;
			height: 35vh;
		}

		.bg2 {
			position: absolute;
			bottom: 0;
		}

		.login-btn-wrapper {
			position: fixed;
			bottom: 20vh;
			width: 100vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.login-btn {
			margin-top: 8vh;
			width: 295px;
			height: 52px;
			background: linear-gradient(90deg, #FFD8BB 0%, #F0986A 100%);
			border-radius: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 18px;
			color: #0B0F12;
		}

		.term {
			margin-top: 4vh;
			width: 280px;
			height: 40px;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 14px;
			color: #999999;
			line-height: 20px;
			text-align: left;
			font-style: normal;
			position: relative;
			padding-left: 20px;

			.check-icon {
				height: 14px;
				width: 14px;
				position: absolute;
				left: 0;
				top: 3px;
			}

			&-href {
				color: rgba(255, 216, 187, 1);
			}
		}

		.login-state2 {
			position: absolute;
			top: 16vh;
			width: 100vw;

			.form {
				height: 80vh;
				background: rgba(11, 15, 18, 0.4);
				border-radius: 34px 34px 0px 0px;
				border: 1px solid #FFD8BB;
				backdrop-filter: blur(3px);
				padding: 0 35px;
				margin-top: 24px;

				.inputer {
					height: 36px;
					border: none;
					background: #1B1B1B;
					border-radius: 6px;
					margin-top: 16px;

				}

				.label {
					padding-top: 24px;

					image {
						margin-right: 1px;
						width: 20px;
						height: 20px;
					}

					text {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 15px;
						color: #FFFFFF;
						line-height: 21px;
						text-align: left;
						font-style: normal;
						text-transform: uppercase;
						vertical-align: top;
					}
				}
			}

			.pwd {
				position: relative;

				.send-code {
					position: absolute;
					right: 14px;
					top: 14px;
					display: block;
					height: 20px;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 14px;
					color: #FFD8BB;
					line-height: 20px;
					text-align: left;
					font-style: normal;
				}
			}

			.title {
				width: 164px;
				height: 74px;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 26px;
				color: #FFD8BB;
				line-height: 37px;
				letter-spacing: 1px;
				text-align: left;
				font-style: normal;
				margin-left: 24px;
			}

			.img1 {
				width: 137px;
				height: 131px;
				position: absolute;
				right: 24px;
				top: -15px;
			}


		}

		.login-state1 {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: absolute;
			top: 18vh;
			width: 100vw;

			.title {
				height: 37px;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 26px;
				color: #FFD8BB;
				line-height: 37px;
				letter-spacing: 1px;
				text-align: center;
				font-style: normal;
			}

			.sub-title {
				height: 22px;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 16px;
				color: #999999;
				line-height: 22px;
				text-align: left;
				font-style: normal;
				margin-top: 4vh;
			}

			image {
				margin-top: 8vh;
				width: 137px;
				height: 131px;
			}
		}
	}
</style>